後台管理者頁面設計概念同本專案的前端頁面。管理者於指定的頁面登入後，主頁功能除首頁、登出外提供「管理餐廳列表」一項功能。因後台模板與前端相似，開發過程會簡單說明並分成兩篇。

(1)建立與啟動管理者 API
同「Day5-試試Vue3-建立會員API」、「Day13-試試Vue3-建立餐廳API」與「Day20-試試Vue3-建立會員餐廳API」篇採用 json-server 方式建立 API。

(1-1)新增 admindb.json 檔案建立資料
專案根目錄/ db 資料夾底下新增 admindb.json 的 json 格式檔案於該資料夾。

本專案情境的後台管理者資料由公司資訊處建立並具管理權限。管理者 API 資料僅供前端頁面取用。資料內容為管理者名稱、電子郵件、密碼等屬性。這步驟是在本地端建立。

{
  "admin": [
    {
      "name": "Boss",
      "email": "boss@gmail.com",
      "password": "Boss123",
      "id": 1
    }
  ]
}

(1-2)終端機啟動 JSON API 伺服器
目前專案有會員、餐廳、會員餐廳、管理者共四個 API ，同一台電腦不能運行兩個以上相同通訊埠的 json-server ，所以新增第四個 json-server 也需指派不同的通訊埠。

開啟四個（windows系統）命令提示字元分別執行以下指令

cd 路徑...\db
json-server --watch db.json --port 3000

cd 路徑...\db
json-server --watch restaurant.json --port 3001

cd 路徑...\db
json-server --watch userRes.json --port 3002

cd 路徑...\db
json-server --watch admindb.json --port 3003

註：一定要在執行「啟動 JSON API 伺服器」情況下才能連上/執行這些 API 。

(2)後台管理者頁面
檔案有管理者登入頁面、管理者主頁（功能列表有首頁、管理餐廳列表、登出）。前後台模板設計概念相似，本小節開始以本系列相應的前端文章連結來當程式碼，並用文字說明需要調整的部分。各位讀者可以藉此練習看看。

(2-1)新增管理者登入頁面
路徑 src / views 底下新增 BackLayout.vue 檔案。

• 程式碼請參考「Day6-試試Vue3-表單使用Vee Validate驗證」篇。調整以下內容。
  • 有關「會員」文字描述改為「管理者」。
  • 為讓用戶能一眼識別出會員與管理者登入頁面，可調整頁面排版（如文字顏色、圖片等）。
  • html 架構中 <v-form> 的表單送出函式 @submit="submitOrder"，裡頭的 axios.get() 路徑要改成管理者 API 。如此才能驗證該用戶是否具管理者資格。
    • 登入驗證成功後，路由轉址 this.$router.push(""); 要改成指向管理者主頁的路徑。

附上管理者登入畫面。

(2-2)新增管理者主頁
管理者登入後的畫面稱為管理者主頁（以下簡稱主頁）。路徑 src / views 底下新增 admin 資料夾，並於此增加 AdminMain.vue 檔案。

• 程式碼請參考「Day8-試試Vue3-會員登入後轉跳主頁」篇。調整以下內容。
  • 內容同前一節的第1、2點。
  • 主頁功能列上的選單項目路徑 <RouterLink></RouterLink> 也要調整成後台管理者。

附上管理者主頁畫面。

(2-3)新增路由
路徑 src / router / index.js 寫入以下語法將後台管理者頁面新增進路由表內。

const router = createRouter({
  ...
  routes: [
  ...
    {
      path: '/adminlogin',
      component: () => import('../views/BackLayout.vue')
    },
    {
      path: '/adminlogin/main',
      component: () => import('../views/admin/AdminMain.vue')
    },
    {
      path: '/adminlogin/restaurantlist',
      component: () => import('../views/admin/AdminResList.vue')
    },
  ]
})

(2-4)建立管理者的 Pinia store
將管理者登入頁面（BackLayout.vue 檔）中 axios.get() 取得的管理者 name 儲存到 Pinia 裡的 store 。再透過該 store 取出 name 給管理者主頁（AdminMain.vue 檔），如此就能在主頁裡顯示管理者 name 。此篇 Pinia 的 store 採用 Option store 寫法。

先在路徑 src / components 底下新增 AdminLoginStore.js 檔案作為登入管理者的 Pinia store。

• 程式碼請參考「Day9-試試Vue3-主頁歡迎訊息顯示會員名(Pinia)」或「Day21-試試Vue3-口袋餐廳選單(5-1)」篇。調整以下內容。
  • 檔案 AdminLoginStore.js 裡的 Pinia store 函數 useLoginStore 名稱要另外定義，使之成為管理者的 store 實例。
  • 路徑 src / views / BackLayout.vue 管理者登入頁面的檔案，引入 Pinia store 時也要將原本前端會員 store 實例用的變數名稱都改為管理者的。